<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 引入bootstrap 样式文件 -->
  <link rel="stylesheet" href="css/bootstrap.min.css">
   <!-- 引入字体图标样式 -->
  <link rel="stylesheet" href="fonts/bootstrap-icons.css">
  <!-- 引入首页样式文件 -->
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/media.css">
</head>
<body>
  <!-- 导航栏模块 -->
  <nav class="navbar navbar-expand-md bg-light fixed-top">
    <div class="container-fluid nav-container">
      <!-- 品牌标识区域 -->
      <h1 class="title">
        <a class="navbar-brand" href="#">
          <img src="images/logo.png" alt="logo" width="210" height="55">
        </a>
      </h1>   
      <!-- 折叠按钮区域 -->
      <button class="navbar-toggler" type="button" data-bs-target="#navbar" data-bs-toggle="collapse">
        <span class="navbar-toggler-icon"></span>
      </button>  
      <!-- 导航菜单区域 -->
      <div class="collapse navbar-collapse" id="navbar">
        <!-- 导航菜单列表 -->
        <ul class="navbar-nav ms-5 me-auto">
          <li class="nav-item"><a class="nav-link active" href="#">首页</a></li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">课程</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Java EE</a></li>
              <li><a class="dropdown-item" href="#">前端开发</a></li>
              <li><a class="dropdown-item" href="#">大数据</a></li>
              <li><a class="dropdown-item" href="#">人工智能</a></li>
              <li><a class="dropdown-item" href="#">UI设计</a></li>
              <li><a class="dropdown-item" href="#">软件测试</a></li>
              <li><a class="dropdown-item" href="#">产品经理</a></li>
            </ul>
          </li>
          <li class="nav-item"><a class="nav-link" href="#">专业规划</a></li>
        </ul>
        <!-- 搜索表单 -->
        <form action="" class="submit ms-auto me-3">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="请输入课程内容">
            <button class="text-white bg-primary border-0 rounded-1"><i class="bi bi-search"></i></button>
          </div>
        </form>
        <!-- 登录和注册按钮 -->
        <div class="login">
          <a href="#" class="btn btn-outline-primary btn-sm">登录</a>
          <a href="#" class="btn btn-outline-secondary btn-sm">注册</a> 
        </div>
      </div>      
    </div>
  </nav>  
  <!-- 轮播图模块 -->
  <div class="course-banner">
    <div id="carousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="2000">
      <!-- 指示器区域 -->
      <div class="carousel-indicators">
        <button type="button" data-bs-target="#carousel" data-bs-slide-to="0" class="active"></button>
        <button type="button" data-bs-target="#carousel" data-bs-slide-to="1"></button>
        <button type="button" data-bs-target="#carousel" data-bs-slide-to="2"></button>
        <button type="button" data-bs-target="#carousel" data-bs-slide-to="3"></button>
      </div>      
      <!-- 轮播项目区域 -->
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="images/banner01.png" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item">
          <img src="images/banner02.png" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item">
          <img src="images/banner03.png" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item">
          <img src="images/banner04.png" class="d-block w-100" alt="">
        </div>
      </div>
      <!-- 左切换按钮区域 -->
      <button type="button" class="carousel-control-prev" href="#carousel" data-bs-slide="prev" data-bs-target="#carousel">
        <span class="carousel-control-prev-icon"></span>
      </button>
      <!-- 右切换按钮区域 -->
      <button type="button" class="carousel-control-next" href="#carousel" data-bs-slide="next" data-bs-target="#carousel">
        <span class="carousel-control-next-icon"></span>
      </button>
    </div>
    <!-- 学习资源区域 -->
    <section class="recommend container-fluid">
      <div class="align-self-center">
        <ul class="list-unstyled list-inline d-flex flex-wrap justify-content-center">
          <li class="list-inline-item"><a class="nav-link" href="#"><i></i>学习文档</a></li>
          <li class="list-inline-item fathli2"><a class="nav-link" href="#"><i></i>示例代码</a></li>
          <li class="list-inline-item fathli3"><a class="nav-link" href="#"><i></i>帮助文档</a></li>
          <li class="list-inline-item fathli4"><a class="nav-link" href="#"><i></i>练习题</a></li>
          <li class="list-inline-item fathli5"><a class="nav-link" href="#"><i></i>社区支持</a></li>
        </ul>
      </div>
    </section>
  </div>
  <!-- 视频教程模块 -->
  <div class="course-free bg-body py-4 py-lg-5">
    <div class="container">
      <h2 class="title">视频教程</h2>
      <p class="title-text mb-4 mt-3">解锁技能的钥匙，学无止境的奇迹！<a href="#" class="startLearning ms-2">前往学习→</a></p>
      <div class="row row-cols-2 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 row-cols-xxl-5 g-3 pt-lg-2">
        <div class="col">
          <a href="#">
            <div class="card">
              <img class="card-img" src="images/course01.png" alt="">
              <div class="card-body">
                <h6 class="text-truncate">JavaScript数据看板项目实战</h6>
                <p class="card-text pt-2"><span>高级</span> · <i>1126</i>人在学习</p>
              </div>
            </div>
          </a>
        </div>
        <div class="col">
          <a href="#">
            <div class="card">
              <img class="card-img" src="images/course02.png" alt="">
              <div class="card-body"> 
                <h6 class="text-truncate">Vue.js——面经全端项目</h6>
                <p class="card-text pt-2"><span>高级</span> · <i>2726</i>人在学习</p>
              </div>
            </div>
          </a>
        </div>
        <div class="col">
          <a href="#">
            <div class="card">
              <img class="card-img" src="images/course03.png" alt="">
              <div class="card-body"> 
                <h6 class="text-truncate">Vue.js项目——IHRM人力资源</h6>
                <p class="card-text pt-2"><span>高级</span> · <i>7192</i>人在学习</p>
              </div>
            </div>
          </a>
        </div>
        <div class="col">
          <a href="#">
            <div class="card">
              <img class="card-img" src="images/course04.png" alt="">
              <div class="card-body"> 
                <h6 class="text-truncate">Vue.js项目——优医问诊</h6>
                <p class="card-text pt-2"><span>高级</span> · <i>7192</i>人在学习</p>
              </div>
            </div>
          </a>
        </div>
        <div class="col">
          <a href="#">
            <div class="card">
              <img class="card-img" src="images/course05.png" alt="">
              <div class="card-body"> 
                <h6 class="text-truncate">小兔鲜电商小程序项目</h6>
                <p class="card-text pt-2"><span>高级</span> · <i>2703</i>人在学习</p>
              </div>
            </div>
          </a>
        </div>
        <div class="col">
          <a href="#">
            <div class="card">
              <img class="card-img" src="images/course06.png" alt="">
              <div class="card-body"> 
                <h6 class="text-truncate">前端框架Flutter开发实战</h6>
                <p class="card-text pt-2"><span>高级</span> · <i>2841</i>人在学习</p>
              </div>
            </div>
          </a>
        </div>
        <div class="col">
          <a href="#">
            <div class="card">
              <img class="card-img" src="images/course07.png" alt="">
              <div class="card-body"> 
                <h6 class="text-truncate">React.js——极客园H5项目</h6>
                <p class="card-text pt-2"><span>高级</span> · <i>95682</i>人在学习</p>
              </div>
            </div>
          </a>
        </div>
        <div class="col">
          <a href="#">
            <div class="card">
              <img class="card-img" src="images/course08.png" alt="">
              <div class="card-body"> 
                <h6 class="text-truncate">React.js——极客园PC端项目</h6>
                <p class="card-text pt-2"><span>高级</span> · <i>904</i>人在学习</p>
              </div>
            </div>
          </a>
        </div>
        <div class="col">
          <a href="#">
            <div class="card">
              <img class="card-img" src="images/course09.png" alt="">
              <div class="card-body"> 
                <h6 class="text-truncate">Fetch API 实战</h6>
                <p class="card-text pt-2"><span>高级</span> · <i>1516</i>人在学习</p>
              </div>
            </div>
          </a>
        </div>
        <div class="col">
          <a href="#">
            <div class="card">
              <img class="card-img" src="images/course10.png" alt="">
              <div class="card-body"> 
                <h6 class="text-truncate">Node.js零基础入门教程</h6>
                <p class="card-text pt-2"><span>高级</span> · <i>2766</i>人在学习</p>
              </div>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
  <!-- 学习路线模块 -->
  <div class="course-line bg-body py-4 py-lg-5 mt-3">
    <div class="container">
      <h2 class="title">学习路线</h2>
      <p class="title-text mb-2 mt-3">踏上新征程，探索知识的宝藏！</p>
      <!-- 导航区域 -->
      <ul class="nav course-tabs d-flex justify-content-between pt-lg-2">
        <li class="nav-item">
          <a class="nav-link active" href="#product_tab_01" data-bs-toggle="tab"><span class="icon-container"><i></i></span>Java EE</a>
        </li>
        <li class="nav-item icon-web">
          <a class="nav-link" href="#product_tab_02" data-bs-toggle="tab"><span class="icon-container"><i></i></span>前端开发</a>
        </li>
        <li class="nav-item icon-python">
          <a class="nav-link" href="#product_tab_03" data-bs-toggle="tab"><span class="icon-container"><i></i></span>大数据</a>
        </li>
        <li class="nav-item icon-ai">
          <a class="nav-link" href="#product_tab_04" data-bs-toggle="tab"><span class="icon-container"><i></i></span>人工智能</a>
        </li>
        <li class="nav-item icon-ui">
          <a class="nav-link" href="#product_tab_05" data-bs-toggle="tab"><span class="icon-container"><i></i></span>UI设计</a>
        </li>
        <li class="nav-item icon-test">
          <a class="nav-link" href="#product_tab_06" data-bs-toggle="tab"><span class="icon-container"><i></i></span>软件测试</a>
        </li>
        <li class="nav-item icon-xmt">
          <a class="nav-link" href="#product_tab_07" data-bs-toggle="tab"><span class="icon-container"><i></i></span>产品经理</a>
        </li>
        <li class="nav-item icon-pm">
          <a class="nav-link" href="#product_tab_08" data-bs-toggle="tab"><span class="icon-container"><i></i></span>新媒体</a>
        </li>
      </ul>
      <!-- 标签页内容区域 -->
      <div class="tab-content">
        <div class="tab-pane fade show active" id="product_tab_01">
          <div class="row">
            <div class="col-md-6 col-lg-4">
              <div class="course-box">
                <div class="course-box-right">
                  <p><b>01</b></p>
                </div>
                <div class="course-box-left">
                  <h3 class="text-center">Java基础</h3>
                  <div class="text-center">
                    <p>Java基本用法</p>
                    <p>Java面向对象</p>
                    <p>集合技术&I/O技术</p>
                    <p>JDK的新特性&基础加强</p>
                    <p>XML配置解析技术</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-6 col-lg-4">
              <div class="course-box">
                <div class="course-box-right">
                  <p><b>02</b></p>
                </div>
                <div class="course-box-left">
                  <h3 class="text-center">Java Web</h3>
                  <div class="text-center">
                    <p>数据库MySQL</p>
                    <p>数据库连接技术</p>
                    <p>网页开发技术</p>
                    <p>样式表技术</p>
                    <p>异步交互技术</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-6 col-lg-4">
              <div class="course-box">
                <div class="course-box-right">
                  <p><b>03</b></p>
                </div>
                <div class="course-box-left">
                  <h3 class="text-center">Java开发框架</h3>
                  <div class="text-center">
                    <p>Spring MVC框架</p>
                    <p>MyBatis框架</p>
                    <p>MyBatis Plus框架</p>
                    <p>Spring Boot技术</p>
                    <p>Git版本控制</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-6 col-lg-4">
              <div class="course-box">
                <div class="course-box-right">
                  <p><b>04</b></p>
                </div>
                <div class="course-box-left">
                  <h3 class="text-center">中间件&服务框架</h3>
                  <div class="text-center">
                    <p>微服务注册中心</p>
                    <p>微服务调用</p>
                    <p>客户端负载均衡</p>
                    <p>消息中间件</p>
                    <p>分布式缓存</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="tab-pane fade" id="product_tab_02">前端开发</div>
        <div class="tab-pane fade" id="product_tab_03">大数据</div>
        <div class="tab-pane fade" id="product_tab_04">人工智能</div>
        <div class="tab-pane fade" id="product_tab_05">UI设计</div>
        <div class="tab-pane fade" id="product_tab_06">软件测试</div>
        <div class="tab-pane fade" id="product_tab_07">产品经理</div>
        <div class="tab-pane fade" id="product_tab_08">新媒体</div>
      </div>
    </div>
  </div> 
  <!-- 热门学习工具模块 -->
  <div class="course-tools bg-body py-4 py-lg-5 mt-3">
    <div class="container">
      <h2 class="title">热门学习工具</h2>
      <p class="title-text mb-2 pt-2">引领学习新时代的热门学习工具！</p>
      <div class="row pt-2 pt-lg-2">
        <div class="col-2 col-sm-2 col-md-2 col-lg-1">
          <img src="images/tools1.jpg" alt="" class="img-fulid">
        </div>
        <div class="col-10 col-sm-10 col-md-10 col-lg-11">
          <h5>JDK</h5>
          <p class="text-muted">JDK是针对Java开发人员的软件开发工具包。自从Java推出以来，JDK已经成为使用最广泛的Java SDK。</p>
          <button class="btn btn-warning btn-sm">立即下载</button>
          <button class="btn btn-light btn-sm text-secondary mx-4">Java EE</button>
          <button class="btn btn-light btn-sm text-secondary">3000人已下载</button>
        </div>
      </div>
      <div class="row pt-2 pt-lg-4">
        <div class="col-2 col-sm-2 col-md-2 col-lg-1">
          <img src="images/tools2.jpg" alt="" class="img-fulid">
        </div>
        <div class="col-10 col-sm-10 col-md-10 col-lg-11">
          <h5>MySQL</h5>
          <!-- 删除了text-truncate -->
          <p class="text-muted">数据库是按照数据结构来组织、存储和管理数据的仓库。每个数据库都有一个或多个不同的API用于创建、访问、管理、搜索和复制所保存的数据。</p>
          <button class="btn btn-warning btn-sm">立即下载</button>
          <button class="btn btn-light btn-sm text-secondary mx-4">Java EE</button>
          <button class="btn btn-light btn-sm text-secondary">3000人已下载</button>
        </div>
      </div>
      <div class="row pt-2 pt-lg-4">
        <div class="col-2 col-sm-2 col-md-2 col-lg-1">
          <img src="images/tools3.jpg" alt="" class="img-fulid">
        </div>
        <div class="col-10 col-sm-10 col-md-10 col-lg-11">
          <h5>MyEclipse</h5>
          <p class="text-muted">MyEclipse企业级工作平台是对Eclipse IDE的扩展，利用它我们可以在数据库和Java EE的开发、发布以及应用程序服务器的整合方面极大的提高工作效率。</p>
          <button class="btn btn-warning btn-sm rounded-lg">立即下载</button>
          <button class="btn btn-light btn-sm text-secondary mx-4">Java EE</button>
          <button class="btn btn-light btn-sm text-secondary">3000人已下载</button>
        </div>
      </div>
    </div>
  </div>
  <!-- footer -->
  <footer class="course-footer py-4 py-lg-5 bg-light mt-3">
    <div class="container py-md-3 px-4 px-md-3 text-body-secondary">
      <div class="row">
        <!-- 版权信息区域 -->
        <div class="col-lg-5 mb-3">
          <a class="d-inline-flex align-items-center mb-2 text-body-secondary text-decoration-none" href="" aria-label="Bootstrap">
            <img src="images/logo.png" alt="">
          </a>
          <ul class="list-unstyled small">
            <li class="mb-2">在线学习平台是一种通过互联网提供教育和学习资源的平台，它为学生和教育者提供了便利的方式来获取和交流知识。</li>
            <li>© 2023年 保留所有权利。-沪ICP备xxxxx号</li>
          </ul>
          <button class="btn btn-outline-primary">下载APP</button>
        </div>
        <!-- 关于我们区域 -->
        <div class="col-4 col-lg-2 offset-lg-1">
          <h5>关于我们</h5>
          <ul class="list-unstyled">
            <li class="mb-2"><a href="#">关于</a></li>
            <li class="mb-2"><a href="#">管理团队</a></li>
            <li class="mb-2"><a href="#">工作机会</a></li>
            <li class="mb-2"><a href="#">客户服务</a></li>
            <li><a href="#">帮助</a></li>
          </ul>
        </div>
        <!-- 新手指南区域 -->
        <div class="col-4 col-lg-2">
          <h5>新手指南</h5>
          <ul class="list-unstyled">
            <li class="mb-2"><a href="#">如何注册</a></li>
            <li class="mb-2"><a href="#">如何选择</a></li>
            <li class="mb-2"><a href="#">学分是什么</a></li>
            <li class="mb-2"><a href="#">考试未通过怎么办</a></li>
            <li><a href="#">如何拿到毕业证</a></li>
          </ul>
        </div>
        <!-- 合作伙伴区域 -->
        <div class="col-4 col-lg-2">
          <h5>合作伙伴</h5>
          <ul class="list-unstyled">
            <li class="mb-2"><a href="#">合作机构</a></li>
            <li class="mb-2"><a href="#">合作导师</a></li>
          </ul>
        </div>
      </div>
    </div>
  </footer>
  <script src="js/bootstrap.min.js"></script>
</body>
</html>